<template>
  <basic-dialog
    :ok-text="'提交'"
    :width="'40%'"
    :visible="visible"
    :title="'转派人员'"
    :handle-close="onCancel"
    :handle-ok="saveProject"
    :handle-open="handleOpen"
    :loadingBtn="saveBtnLoading"
  >
    <el-form
      class="table_form_wrap"
      ref="quoteForm"
      :model="quoteForm"
      :rules="formValidate"
      label-width="100px"
    >
      <el-form-item label="发送部门" prop="hrDepartmentId">
        <el-select
          filterable
          clearable
          v-model="quoteForm.hrDepartmentId"
          @clear="clearDepartmentValue"
          @change="changeDepartFn"
          placeholder="请选择发送部门"
        >
          <el-option
            v-for="item in toDeptIdStatus"
            :key="item.hrDepartmentId"
            :label="item.hrDepartmentFullName"
            :value="item.hrDepartmentId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发送人员" prop="userId">
        <el-select
          v-model.trim="quoteForm.userId"
          placeholder="请选择发送人员"
          filterable
          remote
          clearable
          @change="changePersonIdfn"
          @clear="clearPersonValue"
          :remote-method="remoteMethod"
        >
          <el-option
            v-for="item in toPersonIdStatus"
            :key="item.userId"
            :label="item.userFullName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="转派说明" prop="remark">
        <el-input
          v-model.trim="quoteForm.remark"
          maxlength="200"
          type="textarea"
          :rows="6"
        />
      </el-form-item>
      <el-form-item label="转派人" prop="creationName">
        <el-input
          v-model="creationName"
          disabled
        />
      </el-form-item>
      <el-form-item label="转派日期:" prop="datetransfer">
        <el-date-picker
          v-model="datetransfer"
          type="datetime"
          placeholder="日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          disabled
        />
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>

<script>
import { mapActions } from 'vuex';
import BasicDialog from '@sourcing/components/BasicDialog';
import { isResponseSuccess } from '../../utils'

export default {
  components: {
    BasicDialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    setdiolagdata: {
      type: Object,
      required: true,
    },
  },
  data () {
    return {
      saveBtnLoading: false,
      quoteForm: {
        hrDepartmentId: '',
        hrDepartmentFullName: '',
        userId: '',
        userName: '',
        remark: '',
        creationBy: '',
      },
      creationName: '',
      datetransfer: '',
      formValidate: {
        remark: [
          { required: true, message: '请输入转派说明', trigger: 'blur' },
          { type: 'string', min: 1, max: 200, message: '最多输入200字', trigger: 'blur' }
        ],
        hrDepartmentId: [
          { required: true, message: '请选择发送部门', trigger: 'change' }
        ],
      },
      toDeptIdStatus: [],
      toPersonIdStatus: []
    }
  },
  mounted () {
    this.initqueryHrDeptList()
  },
  methods: {
    ...mapActions('sourcing/demandInquery', [
      'requirementSwithList', // 询价
      'transferOrderGoodsList', // 订货
      'queryHrDeptList', // 部门
      'queryHrUserList', // 人员
    ]),
    handleOpen () {
      const userInfo = localStorage.userInfo ? JSON.parse(localStorage.userInfo) : {}
      this.creationName = userInfo?.userName
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      this.datetransfer = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
    },
    onCancel () {
      this.$refs.quoteForm.resetFields();
      this.$emit('update:visible', false);
    },
    // 部门
    initqueryHrDeptList () {
      const cb = (res) => {
        if (isResponseSuccess(res)) {
          this.toDeptIdStatus = res.data
        } else {
          this.toDeptIdStatus = [];
        }
      };
      const data = {
        hrDepartmentFullName: this.quoteForm.hrDepartmentId,
      };
      this.queryHrDeptList({
        payload: {
          data,
          cb,
        },
      });
    },
    changeDepartFn (val) {
      this.initqueryHrUserList(val)
      this.toDeptIdStatus.map(item => {
        if (item.hrDepartmentId === val) {
          this.quoteForm.hrDepartmentFullName = item.hrDepartmentFullName
        }
      })
    },
    // 人员
    initqueryHrUserList (departid, query) {
      const cb = (res) => {
        if (isResponseSuccess(res)) {
          this.toPersonIdStatus = res.data
        } else {
          this.toPersonIdStatus = []
        }
      };
      const data = {
        hrDepartmentId: departid,
        userName: query
      };
      this.queryHrUserList({
        payload: {
          data,
          cb,
        },
      });
    },
    // 搜索人员
    remoteMethod (query) {
      if (query !== '') {
        this.initqueryHrUserList('', query)
      } else {
        this.toPersonIdStatus = [];
      }
    },
    // 选择人员
    changePersonIdfn (val) {
      this.toPersonIdStatus.map(item => {
        if (item.userId === val) {
          this.quoteForm.userName = item.userName
          this.quoteForm.hrDepartmentId = item.hrDepartmentId
          this.quoteForm.hrDepartmentFullName = item.hrDepartmentFullName
        }
      })
    },
    saveProject () {
      this.$refs['quoteForm'].validate((valid) => {
        if (valid) {
          this.saveBtnLoading = true;
          let url = '';
          if (this.setdiolagdata.tabtype == 1) { // 我是询价
            url = this.requirementSwithList
          } else {
            url = this.transferOrderGoodsList
          }
          this.quoteForm.entryIds = this.setdiolagdata.selectionChangeval
          const cb = (res) => {
            this.saveBtnLoading = false;
            if (isResponseSuccess(res)) {
              this.$message.success(res.msg);
              this.onCancel();
              this.$parent.getTableData();
            }
          };
          const data = {
            entryIds: this.setdiolagdata.selectionChangeval,
            toDeptId: this.quoteForm.hrDepartmentId,
            toDeptName: this.quoteForm.hrDepartmentFullName,
            toPersonId: this.quoteForm.userId,
            toPersonName: this.quoteForm.userName,
            remark: this.quoteForm.remark,
          };
          url({
            payload: {
              data,
              cb,
            },
          });
        }
      })
    },
    // 清空部门
    clearDepartmentValue () {
      this.quoteForm.hrDepartmentFullName = '';
      this.quoteForm.hrDepartmentId = '';
      this.clearPersonValue()
    },
    // 清空发送人员
    clearPersonValue () {
      this.quoteForm.userId = '';
      this.quoteForm.userName = '';
    }
  }
}
</script>
